<template>
  <div class="container" style="background-color: #e6f7ff;">
    <el-container style="height: 100vh;">
      <!-- 左侧导航栏 -->
      <el-aside width="200px" class="left-nav" style="height: 100%;">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          background-color="#2c3e50"
          text-color="#fff"
          active-text-color="#409EFF"
          style="height: 100%;"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <i class="el-icon-tickets"></i>
              <span>仓库管理</span>
            </template>
            <el-menu-item index="2-1">入库管理</el-menu-item>
            <el-menu-item index="2-2">出库管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <i class="el-icon-tickets"></i>
              <span>单据管理</span>
            </template>
            <el-menu-item index="3-1">单据录入</el-menu-item>
            <el-menu-item index="3-2">单据查询</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <i class="el-icon-tickets"></i>
              <span>其他设置</span>
            </template>
            <el-menu-item index="4-1">功能设置</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-container>
        <!-- 头部工具栏 -->
        <el-header style="display: flex; align-items: center; justify-content: center; height: 60px; padding: 0; background-color: #1890ff; position: relative;">
          <div class="header-content" style="color: white; font-size: 18px; text-align: center;">
            <h2 style="margin: 0;">欢迎使用本系统</h2>
          </div>
          <!-- 右上角下拉菜单 -->
          <el-dropdown
            @command="handleDropdownCommand"
            style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%);"
          >
            <el-button
              type="primary"
              size="mini"
              style="background-color: #1890ff; color: white; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); border: none; padding: 8px;"
            >
              <el-icon>
                <setting style="font-size: 16px;" />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="settings">设置</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <!-- 主体内容区域 -->
        <el-main style="padding: 20px;">
          <!-- 快速访问按钮区域 -->
          <el-row type="flex" justify="center" align="middle" style="margin-top: 20px;">
            <el-col :span="16">
              <el-card class="quick-access-buttons" style="width: 100%;">
                <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">
                  <el-button type="primary" icon="el-icon-folder-opened" style="width: 140px;">
                    <el-icon name="document-add" style="margin-right: 8px;"><folder-opened /></el-icon>
                    <span style="font-size: 16px;">入库管理</span>
                  </el-button>
                  <el-button type="primary" icon="el-icon-folder-remove" style="width: 140px;">
                    <el-icon name="document-remove" style="margin-right: 8px;"><folder-remove /></el-icon>
                    <span style="font-size: 16px;">出库管理</span>
                  </el-button>
                  <el-button type="primary" icon="el-icon-search" style="width: 140px;">
                    <el-icon name="search" style="margin-right: 8px;"><search /></el-icon>
                    <span style="font-size: 16px;">库单查询</span>
                  </el-button>
                  <el-button type="primary" icon="el-icon-document-add" style="width: 140px;">
                    <el-icon name="document-add" style="margin-right: 8px;"><document-add /></el-icon>
                    <span style="font-size: 16px;">单据录入</span>
                  </el-button>
                  <el-button type="primary" icon="el-icon-document" style="width: 140px;">
                    <el-icon name="document" style="margin-right: 8px;"><document /></el-icon>
                    <span style="font-size: 16px;">单据查询</span>
                  </el-button>
                  <el-button type="primary" icon="el-icon-setting" style="width: 140px;">
                    <el-icon name="setting" style="margin-right: 8px;"><setting /></el-icon>
                    <span style="font-size: 16px;">设置</span>
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  FolderOpened,
  FolderRemove,
  Search,
  DocumentAdd,
  Setting
} from '@element-plus/icons-vue' // 已移除未使用的 Document 图标

const router = useRouter()

const activeIndex = ref('1')

const handleSelect = (key) => {
  console.log(key)
}

const handleDropdownCommand = (command) => {
  if (command === 'logout') {
    // 清除认证信息（示例）
    localStorage.removeItem('token')
    // 跳转到登录页面
    router.push('/login')
  } else if (command === 'settings') {
    // 这里可以添加设置相关的逻辑
    console.log('Settings clicked')
  } else if (command === 'edit') {
    // 编辑功能预留
    console.log('Edit clicked')
  }
}
</script>
